<template>
  <div class='page-container'>
    <div ref="avatar-container" class="avatar-container">
      <img class="avatar" :src="defaultAvatar" alt="">
      <img class="frame" :src="frame" alt="">
    </div>
    <van-uploader ref="uploader" class="change-avatar" v-model="fileList" :preview-image="false" :after-read="changeAvatar">
      <div class="change-avatar-btn">更换头像</div>
    </van-uploader>

    <img class="compose-avatar" :src="composeAvatar" alt="">

    <div class="save-btn-wrap">
      <div class="save-btn" @click="handleSaveAvatar">保存图片</div>
    </div>
  </div>
</template>
<script>
import Vue from 'vue';
import { Uploader } from 'vant';

Vue.use(Uploader);
import html2canvas from "html2canvas"
export default {
  name: 'AvatarDemo',
  components: {},
  computed: {},
  data() {
    return {
      defaultAvatar: require('./img/quwei_nor.png'),
      frame: require('./img/frame.png'),
      fileList: [],
      uploadFile: '',
      composeAvatar: ''
    }
  },
  created() {
  },
  mounted() {
  },
  beforeDestroy() {
  },
  methods: {
    changeAvatar() {
      this.uploadFile = this.fileList.pop()
      this.defaultAvatar = this.uploadFile.content
    },
    // 生成快照
    convertToImage(container, options = {}){
      // 设置放大倍数
      const scale = window.devicePixelRatio;

      // 传入节点原始宽高
      const width = container.offsetWidth;
      const height = container.offsetHeight;

      // html2canvas配置项
      const ops = {
        scale,
        width,
        height,
        useCORS: true,
        allowTaint: false,
        ...options
      };

      return html2canvas(container, ops).then(canvas => {
        // 返回图片的二进制数据
        return canvas.toDataURL("image/png");
      });
    },

    async handleSaveAvatar() {
      // 调用函数，取到截图的二进制数据，对图片进行处理（保存本地、展示等）
      this.composeAvatar = await this.convertToImage(this.$refs['avatar-container']);

      // 生成一个a元素
      var a = document.createElement('a')
      // 创建一个单击事件
      var event = new MouseEvent('click')

      // 将a的download属性设置为我们想要下载的图片名称，若name不存在则使用‘下载图片名称’作为默认名称
      a.download = '我的头像'
      // 将生成的URL设置为a.href属性
      a.href = this.composeAvatar
      // 触发a的单击事件
      a.dispatchEvent(event)
    }
  }
}
</script>

<style scoped lang="less">
.page-container {
  min-height: 100vh;
  background-image: url('./img/quwei_bg.png');
  background-size: 100% auto;
  user-select: none;
  .avatar-container {
    margin: 64px auto 0;
    width: 500px;
    height: 500px;
    border-radius: 30px;
    overflow: hidden;
    position: relative;
    .avatar {
      //width: 100%;
      //height: auto;
      max-width: 100%;
      max-height: 100%;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: 1;
    }
    .frame {
      max-width: 100%;
      max-height: 100%;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: 2;
    }
  }

  /deep/ .change-avatar {
    display: block;

    .van-uploader__wrapper {
        justify-content: center;
    }
  }
  .change-avatar-btn {
    margin: 44px auto 64px;
    width: 240px;
    height: 68px;
    border-radius: 34px;
    border: 2px solid #AA0FF9;
    user-select: none;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 28px;
    color: #AA0FF9;
  }

  .compose-avatar {
    display: block;
    margin: 100px auto 0;
    width: 500px;
    height: 500px;
  }

  .save-btn-wrap {
    width: 750px;
    height: 222px;
    background: #FFFFFF;
    box-shadow: 0 2px 18px 0 rgba(0, 0, 0, 0.11);
    position: fixed;
    bottom: 0;
    left: 0;
    .save-btn {
      margin: 32px auto 0;
      width: 702px;
      height: 90px;
      background: #D8D8D8 linear-gradient(90deg, #750AF5 0%, #E015FD 100%);
      border-radius: 45px;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 32px;
      font-weight: 500;
      color: #FFFFFF;
    }
  }
}
</style>
